
<template>
  <div id="hello" style="color: red;font-size: 30px;border:solid 2px;padding: 5px;">我是Hello组件</div>
  <div>{{ count }}</div>
  <button @click="count++">改变++</button>
</template>

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, onUnmounted, ref } from 'vue'

const count = ref(0)

onBeforeMount(() => {
  let div = document.querySelector('#hello')
  console.log('创建之前===》onBeforeMount', div)
})

onMounted(() => {
  let div = document.querySelector('#hello')
  console.log('创建完成===》onMounted', div)
})

onBeforeUpdate(() => {
  let div = document.querySelector('#hello')
  console.log('更新之前===> onBeforeUpdate', div)
})

onUpdated(() => {
  let div = document.querySelector('#hello')
  console.log('更新完成===> onUpdated', div)
})

onBeforeUnmount(() => {
  let div = document.querySelector('#hello')
  console.log('卸载之前===> onBeforeUnmount', div)
})

onUnmounted(() => {
  let div = document.querySelector('#hello')
  console.log('卸载完成===> onUnmounted', div)
})


</script>




<style scoped>
</style>
